<script setup>
//老师用户页面
    import { ref } from 'vue'


    const courseTitle = ref();
    const courseType = ref();
    const courseTeacher = ref();
    const courseGrade = ref();
    const courseTime = ref();
    const courseDes = ref();
    const coursePrice = ref();

    const courseStartTime = ref();
    const courseEndTime = ref();

    const user = ref([
        {name:'小明',categoryName:'人工智能',className:'18级计算机1班',chapter:10,videoNumber:30,price:100},
        {name:'小红',categoryName:'机器学习',className:'18级计算机1班',chapter:10,videoNumber:30,price:100},
        {name:'小刚',categoryName:'数据挖掘',className:'18级计算机1班',chapter:10,videoNumber:30,price:100},
        {name:'小王',categoryName:'数据库',className:'18级计算机1班',chapter:10,videoNumber:30,price:100},
        {name:'小李',categoryName:'软件工程',className:'18级计算机1班',chapter:10,videoNumber:30,price:100}
    ])
    const teacherUser = ref([
        {title:'机器学习',category:'编程',teacherName:'李老师',grade:'大一',studyTime:'30',startTime:'2021-10-10',endTime:'2021-12-12',status:'已开课',categoryprice:100},
        {title:'数据结构',category:'计算机基础',teacherName:'张老师',grade:'大二',studyTime:30,startTime:'2021-09-01',endTime:'2021-12-31',status:'已开课',categoryprice:100},
        {title:'计算机网络',category:'计算机基础',teacherName:'王老师',grade:'大二',studyTime:30,startTime:'2021-09-01',endTime:'2021-12-31',status:'已开课',categoryprice:100},
        {title:'操作系统',category:'计算机基础',teacherName:'黄老师',grade:'大三',studyTime:30,startTime:'2021-09-01',endTime:'2021-12-31',status:'已开课',categoryprice:100}
    ])

    const dialogVisible = ref(false)
    const categoryModel = ref({
        title:'',
        category:'',
        teacherName:'',
        grade:'',
        studyTime:'',
        startTime:'',
        endTime:'',
        status:'',
        categoryprice:''
    })
    const rules = {
        title: [
            { required: true, message: '请输入课程名称', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        category: [
            { required: true, message: '请输入课程分类', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        teacherName: [
            { required: true, message: '请输入课程讲师', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
            ],
        grade: [
            { required: true, message: '请输入课程年级', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        studyTime: [
            { required: true, message: '请输入课时', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        startTime: [
            { required: true, message: '请输入开课时间', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        endTime: [
            { required: true, message: '请输入结束时间', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        status: [
            { required: true, message: '请输入课程状态', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ],
        categoryprice: [
            { required: true, message: '请输入课程价格', trigger: 'blur' },
            { min: 1, max: 10, message: '长度在 1 到 10 个字符', trigger: 'blur' }
        ]
    }
    
    const showDialog=(row)=>{
        dialogVisible.value = true
        categoryModel.value.title = row.title
        categoryModel.value.category = row.category
        categoryModel.value.teacherName = row.teacherName
        categoryModel.value.grade = row.grade
        categoryModel.value.studyTime = row.studyTime
        categoryModel.value.startTime = row.startTime
        categoryModel.value.endTime = row.endTime
        categoryModel.value.status = row.status
        categoryModel.value.categoryprice = row.categoryprice
        console.log(categoryModel.value)
    }
    const updateCategory=()=>{
        const index = teacherUser.value.findIndex(item => item.title === categoryModel.title)
        teacherUser.value[index] = categoryModel.value
        dialogVisible.value = false
    }


    const categoryOptions = [
        { label: '机器学习', value: '1' },
        { label: '深度学习', value: '2' },
        { label: '数据分析', value: '3' }
    ];

    const teacherOptions = [
        { label: '李老师', value: '1' },
        { label: '张老师', value: '2' },
        { label: '王老师', value: '3' },
        { label: '韩老师', value: '4' }
    ];

    const gradeOptions = [
        { label: '大一', value: '1' },
        { label: '大二', value: '2' },
        { label: '大三', value: '3' }
    ];

    const studyTimeOptions = [
        { label: '按年', value: '1' },
        { label: '按月', value: '2' },
        { label: '按天', value: '3' }
    ];


    
    const myCourses = ref([
        {title:'数据结构',category:'计算机基础',teacherName:'张老师',grade:'大二',studyTime:30,startTime:'2021-09-01',endTime:'2021-12-31',cover:'',categoryprice:100},
        {title:'计算机网络',category:'计算机基础',teacherName:'王老师',grade:'大二',studyTime:30,startTime:'2021-09-01',endTime:'2021-12-31',cover:'',categoryprice:100},
        {title:'操作系统',category:'计算机基础',teacherName:'黄老师',grade:'大三',studyTime:30,startTime:'2021-09-01',endTime:'2021-12-31',cover:'',categoryprice:100},
        {title:'数据结构',category:'计算机基础',teacherName:'张老师',grade:'大二',studyTime:30,startTime:'2021-09-01',endTime:'2021-12-31',cover:'',categoryprice:100},
    ])

    const createCourse = () => {
        const newCourse = {
            title: courseTitle.value,
            category: categoryOptions.find(option => option.value === courseType.value)?.label || '',
            teacherName: teacherOptions.find(option => option.value === courseTeacher.value)?.label || '',
            grade: gradeOptions.find(option => option.value === courseGrade.value)?.label || '',
            studyTime: studyTimeOptions.find(option => option.value === courseTime.value)?.label || '',
            startTime: courseStartTime.value,
            endTime: courseEndTime.value,
            cover: '',
            categoryprice: coursePrice.value
        };
        myCourses.value.push(newCourse);
        console.log('新创建的课程：', newCourse);
        console.log('我的课程列表：', myCourses.value);

        // 清空表单
        courseTitle.value = '';
        courseType.value = '';
        courseTeacher.value = '';
        courseGrade.value = '';
        courseTime.value = '';
        courseStartTime.value = '';
        courseEndTime.value = '';
        courseDes.value = '';
        coursePrice.value = 0;
    };

    const activeName = ref('first');



    
</script>
<template>
    <div>
        <el-tabs v-model="activeName">
            <el-tab-pane label="查看学生信息" name="first">
                <el-table :data="user">
                    <el-table-column label="选课学生姓名" prop="name"/>
                    <el-table-column label="选课课程名称" prop="categoryName"/>
                    <el-table-column label="选课班级" prop="className"/>
                    <el-table-column label="学生完成章节" prop="chapter"/>
                    <el-table-column label="学生观看视频数" prop="videoNumber"/>
                    <el-table-column label="课程价格" prop="price"/>
                    <el-table-column label="操作" width="100px">
                        <el-button type="text">查看</el-button>
                    </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="1000" style="display: flex;justify-content: space-between;align-items: center; position: bottom;margin-top: 10px;" />
            </el-tab-pane>
            <el-tab-pane label="开设的课程" name="second">
                <el-table :data="teacherUser">
                    <el-table-column label="课程名称" prop="title"/>
                    <el-table-column label="课程类别" prop="category"/>
                    <el-table-column label="课程讲师" prop="teacherName"/>
                    <el-table-column label="课程年级" prop="grade"/>
                    <el-table-column label="课时" prop="studyTime"/>
                    <el-table-column label="开课时间" prop="startTime"/>
                    <el-table-column label="结课时间" prop="endTime"/>
                    <el-table-column label="课程状态" prop="status"/>
                    <el-table-column label="课程价格" prop="categoryprice"/>
                    <el-table-column label="操作" width="100px">
                        <template #default="{ row }">
                            <el-button type="text" @click="showDialog(row)">修改</el-button>
                        </template>
                        
                    </el-table-column>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="1000" style="display: flex;justify-content: space-between;align-items: center; position: bottom;margin-top: 10px;" />
            </el-tab-pane>

            <el-dialog v-model="dialogVisible" title="编辑分类" style="width: 30%;">
            <el-form :model="categoryModel" :rules="rules" label-width="100px" style="padding-right: 40px;">
                <el-form-item label="课程名称" prop="title">
                    <el-input minlength="1" maxlength="10" v-model="categoryModel.title"></el-input>
                </el-form-item>
                <el-form-item label="课程分类" prop="category">
                    <el-input minlength="1" maxlength="10" v-model="categoryModel.category"></el-input>
                </el-form-item>
                <el-form-item label="课程讲师" prop="teacherName">
                    <el-input minlength="1" maxlength="10" v-model="categoryModel.teacherName"></el-input>
                </el-form-item>
                <el-form-item label="课程年级" prop="grade">
                    <el-input minlength="1" maxlength="10" v-model="categoryModel.grade"></el-input>
                </el-form-item>
                <el-form-item label="课时" prop="studyTime">
                    <el-input minlength="1" maxlength="10" v-model="categoryModel.studyTime"></el-input>
                </el-form-item>
                <el-form-item label="开课时间" prop="startTime">
                    <el-input minlength="1" maxlength="10" v-model="categoryModel.startTime"></el-input>
                </el-form-item>
                <el-form-item label="结束时间" prop="endTime">
                    <el-input minlength="1" maxlength="10" v-model="categoryModel.endTime"></el-input>
                </el-form-item>
                <el-form-item label="课程状态" prop="status">
                    <el-input minlength="1" maxlength="10" v-model="categoryModel.status"></el-input>
                </el-form-item>
                <el-form-item label="课程价格" prop="categoryprice">
                    <el-input minlength="1" maxlength="10" v-model="categoryModel.categoryprice"></el-input>
                </el-form-item>
            </el-form>
            <template #footer>
                <span>
                    <el-button @click="dialogVisible = false">取消</el-button>
                    <el-button @click="updateCategory">确认</el-button>
                </span>
            </template>

        </el-dialog>

            <el-tab-pane label="创建课程" name="third">
                <div class="app-container">
                    <h2 style="text-align: center;">发布课程</h2>
                    <!-- <el-steps :active="1" process-status="wait" align-center style="margin-bottom: 40px;">
                        <el-step title="填写并发布课程信息"/>
                    </el-steps> -->

                    <el-form label-width="120px">
                    <el-form-item label="课程标题" >
                        <el-input v-model="courseTitle"  placeholder="示例：机器学习项目课：从基础到搭建项目视频课程。专业名称注意大小写"></el-input>
                    </el-form-item>

                    <el-form-item label="课程描述" >
                        <el-input v-model="courseDes" placeholder="介绍一下你的课程吧(可不填)"></el-input>
                    </el-form-item>
                    
                    <el-form-item label="课程类别">
                        <el-select v-model="courseType" placeholder="请选择" style="max-width: 200px;">
                            <el-option  label="机器学习" value="1"></el-option>
                            <el-option  label="深度学习" value="2"></el-option>
                            <el-option  label="数据分析" value="3"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="课程讲师" >
                        <el-select v-model="courseTeacher" placeholder="请选择" style="max-width: 200px;">
                            <el-option  label="李老师" value="1"></el-option>
                            <el-option  label="张老师" value="2"></el-option>
                            <el-option  label="王老师" value="3"></el-option>
                            <el-option  label="韩老师" value="4"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="课程年级" >
                        <el-select v-model="courseGrade" placeholder="请选择" style="max-width: 200px;">
                            <el-option  label="大一" value="1"></el-option>
                            <el-option  label="大二" value="2"></el-option>
                            <el-option  label="大三" value="3"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="课时" >
                        <el-select v-model="courseTime" placeholder="请选择" style="max-width: 200px;">
                            <el-option  label="按年" value="1"></el-option>
                            <el-option  label="按月" value="2"></el-option>
                            <el-option  label="按天" value="3"></el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item label="开课时间" >
                        <el-date-picker v-model="courseStartTime" type="date" placeholder="选择日期" style="width: 200px;"></el-date-picker>
                    </el-form-item>

                    <el-form-item label="结课时间" >
                        <el-date-picker v-model="courseEndTime" type="date" placeholder="选择日期" style="width: 200px;"></el-date-picker>
                    </el-form-item>

                    <el-form-item label="课程封面" >
                        <el-upload action="#" list-type="picture-card" :auto-upload="false">
                            <el-icon><Plus /></el-icon>

                            <template #file="{ file }">
                            <div>
                                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                                <span class="el-upload-list__item-actions">
                                <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                                    <el-icon><zoom-in /></el-icon>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleDownload(file)">
                                    <el-icon><Download /></el-icon>
                                </span>
                                <span v-if="!disabled" class="el-upload-list__item-delete" @click="handleRemove(file)">
                                    <el-icon><Delete /></el-icon>
                                </span>
                                </span>
                            </div>
                            </template>
                        </el-upload>
                    </el-form-item>

                    <el-form-item label="课程价格" >
                        <el-input-number v-model="coursePrice" :min="0"  controls-position="right" placeholder="0" @click="handleChange">元</el-input-number>
                    </el-form-item>
                    </el-form>

                    <el-form-item class="custom-form-item">
                        <div style="display: flex;justify-content: center;align-items: center;gap: 10px;">
                            <el-button type="primary" @click="createCourse">创建</el-button>
                            <el-button type="default">取消</el-button>
                        </div>
                    </el-form-item>

                </div>
            </el-tab-pane>

            <el-tab-pane label="我的课程" name="fourth">
                <el-table :data="myCourses">
                    <el-table-column label="课程名称" prop="title"/>
                    <el-table-column label="课程类别" prop="category"/>
                    <el-table-column label="课程讲师" prop="teacherName"/>
                    <el-table-column label="课程年级" prop="grade"/>
                    <el-table-column label="课时" prop="studyTime"/>
                    <el-table-column label="开课时间" prop="startTime"/>
                    <el-table-column label="结课时间" prop="endTime"/>
                    <el-table-column label="封面" prop="cover"/>
                    <el-table-column label="课程价格" prop="categoryprice"/>
                </el-table>
                <el-pagination background layout="prev, pager, next" :total="1000" style="display: flex;justify-content: space-between;align-items: center; position: bottom;margin-top: 10px;" />
            </el-tab-pane>

        </el-tabs>
        
    </div>
</template>
<style scoped lang="scss">

</style>